<template>
    <div>
        <h1>人员列表</h1>
        <h1>查看求和的结果:{{sum}}</h1>
        <div>
            <input type="text" v-model="name" @keyup.enter="add">
            <button @click="add">添加</button>
        </div>
        <ul>
            <li v-for="p in personList" :key="p.id">
                {{p.name}}
            </li>
        </ul>
    </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
import {nanoid} from'nanoid'
export default {

    name:"PersonList",
    data(){
        return {
            name:''
        }
    },
    computed:{
        ...mapState(['personList','sum'])
    },
    methods:{
        add(){
            this.$store.commit("ADD_PERSON",{
                id:nanoid(),
                name:this.name
            })
            this.name = ''
        },
        
    }


}
</script>
